<template>
  <div class="qtPqssword">
    <el-row>
      <el-col :span="24">
        <div>
          <h1 class="qtTitle">更改密码</h1>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16" class="qtResetPass">
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="旧密码" prop="oldpass">
            <el-input type="password" v-model="ruleForm2.oldpass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpass">
            <el-input type="password" v-model="ruleForm2.newpass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="checknewPass">
            <el-input type="password" v-model="ruleForm2.checknewPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">保存</el-button>
            <el-button @click="resetForm('ruleForm2')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
import { changePassword } from '@/api/index.js'
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.ruleForm2.checknewPass !== '') {
          this.$refs.ruleForm2.validateField('checknewPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.ruleForm2.newpass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm2: {
        oldpass: '',
        newpass: '',
        checknewPass: ''
      },
      rules2: {
        oldpass: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newpass: [{ required: true, validator: validatePass, trigger: 'blur' }],
        checknewPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        // console.log(valid)
        if (valid) {
        //   alert('submit!')
          var username = JSON.parse(localStorage.getItem('loginCode'))
          // console.log(username)
          var obj = { username: username, oldpass: this.ruleForm2.oldpass, newpass: this.ruleForm2.newpass }
          changePassword(obj)
            .then(res => {
            //   console.log(res)
              if (res.status === 200) {
                this.$message.success(res.data.msg)
                this.$refs.ruleForm2.resetFields()
              } else {
                this.$message.error(res.data.msg)
              }
            })
        } else {
          if (this.ruleForm2.oldpass === '') {
            this.$message.error('请输入旧密码')
          }
          this.$message.error('请输入新密码')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.qtPqssword {
  padding: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.qtTitle {
  font-size: 25px;
  text-align: left;
  line-height: 1;
}
.qtResetPass {
    background-color: #fff;
    padding-top: 20px;
    padding-left: 200px;
    padding-right: 200px;
}
</style>
